import React, { Component } from 'react';
//引入sass文件
import './recommend.scss'
//引入后数据
import { getPinTuanData } from '../../../../../server/pinTuanServer'
class recommend extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pinTuanArr: [],
      pinTuanTitle: ['推荐', '母婴健康', '家居', '美妆', '鞋类', '饰品配饰', '礼品箱包', '食品保健', '内衣', '数码家电', '女装', '下期预告'],
      SelectIndex: 0,
      isNextUp:false
    }
  }

  componentWillMount() {
    this.getPinTuanData();

  }
  pinTuanChangeTab(index) {
    this.setState({
      SelectIndex: index
    })
    if (index === 0) {
      this.getPinTuanData();
    }
    if (index === 1) {
      this.getPinTuanData('coutuan_baby');
    } if (index === 2) {
      this.getPinTuanData('coutuan_furniture');
    } if (index === 3) {
      this.getPinTuanData('coutuan_makeup');
    } if (index === 4) {
      this.getPinTuanData('coutuan_shose');
    } if (index === 5) {
      this.getPinTuanData('coutuan_jewellery');
    } if (index === 6) {
      this.getPinTuanData('coutuan_bag');
    } if (index === 7) {
      this.getPinTuanData('coutuan_food');
    } if (index === 8) {
      this.getPinTuanData('coutuan_underwear');
    } if (index === 9) {
      this.getPinTuanData('coutuan_3c');
    } if (index === 10) {
      this.getPinTuanData('coutuan_ladies');
    } if (index === 11) {
      this.getPinTuanData('coutuan_pre');
      this.setState({
        isNextUp:true
      })
    }
    console.log(index);
  }
  getPinTuanData(parms1) {
    getPinTuanData(parms1).then(({ pinTuanArr }) => {
      this.setState({
        pinTuanArr: pinTuanArr
      })
    })
  }
  render() {
    return (
      <div className="pintuan-recommend">
        <ul className="pin-tuan-title">
          {
            this.state.pinTuanTitle.map((item, index) => {
              return (
                <li
                  key={index}
                  className={`pinTuanTitle ${this.state.SelectIndex === index ? 'pinTuanTitle_active' : ''}`}
                  onClick={this.pinTuanChangeTab.bind(this, index)}
                >
                  {item}
                </li>
              )
            })
          }
        </ul>
        <ul className="pin-tuan-content">
          {
            this.state.pinTuanArr.map((item, index) => {
              return (
                <li
                  key={index}
                  className={`pin-tuan-content__li`}
                  ref="name"
                >
                  <div className="pin-tuan-content__img">
                    <img src={item.image} alt="" />
                  </div>
                  <div className="pin-tuan-content__title">
                    <span className="pin-tuan-content__title-tag">
                      {item.group_name_tag}
                    </span>
                    <span className="pin-tuan-content__title-title">
                      {item.short_name}
                    </span>
                  </div>
                  <div className="pin-tuan-price">
                    <div className="pin-tuan-price__left">
                      <span>{item.jumei_price}</span>
                      <span>{item.single_price}</span>
                    </div>
                    <div className={`pin-tuan-price__right ${this.state.SelectIndex === 11 ? 'pin-tuan-price__right2' : ''}`}>
                      {
                        this.state.isNextUp === false ? <span>去开团</span>:''
                      }
                      {
                        this.state.isNextUp === true ? <span>开团</span> :''
                      }
                    </div>
                  </div>
                </li>
              )
            })
          }
        </ul>

      </div>
    )
  }
}

export default recommend;
